import { useEffect, useState } from 'react'
import { ConfigProvider } from 'antd'
import { RouterProvider } from 'react-router'
import { router } from './router'
import { useThemeStore } from './store'

function getCssVar(name: string): string {
  // getComputedStyle(element) 浏览器提供的 API，用于获取某个元素的最终计算样式
  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
}

function getThemeToken() {
  return {
    colorPrimary: getCssVar('--primary'),
    colorPrimaryHover: getCssVar('--primary-hover'),
    colorPrimaryActive: getCssVar('--primary-active'),

    colorSuccess: getCssVar('--success'),
    colorWarning: getCssVar('--warning'),
    colorError: getCssVar('--error'),
    colorInfo: getCssVar('--info'),

    colorBgBase: getCssVar('--bg1'),
    colorBgContainer: getCssVar('--bg2'),
    colorBgLayout: getCssVar('--bg3'),

    colorTextBase: getCssVar('--text1'),
    colorTextSecondary: getCssVar('--text2'),
    colorTextTertiary: getCssVar('--text3'),
    colorTextLightSolid: getCssVar('--text4'),

    colorBorder: getCssVar('--border'),
    colorSplit: getCssVar('--divider'),

    fontFamily: getCssVar('--font-family-sans'),
    fontFamilyCode: getCssVar('--font-family-mono'),

    boxShadow: getCssVar('--shadow-sm'),
    boxShadowSecondary: getCssVar('--shadow-md'),
    boxShadowTertiary: getCssVar('--shadow-lg'),

    motionDurationFast: getCssVar('--transition-fast'),
    motionDurationMid: getCssVar('--transition-base'),
    motionDurationSlow: getCssVar('--transition-slow')
  }
}

export default function App(): React.JSX.Element {
  const theme = useThemeStore((state) => state.theme)
  const [themeToken, setThemeToken] = useState(getThemeToken())

  useEffect(() => {
    setThemeToken(getThemeToken())
  }, [theme])

  return (
    <ConfigProvider theme={{ token: themeToken }}>
      <RouterProvider router={router} />
    </ConfigProvider>
  )
}

// const [themeToken, setThemeToken] = useState(getThemeToken())

// // 监听暗夜模式 class 或系统主题变化
// useEffect(() => {
//   // MutationObserver 是 原生浏览器 API，用于监听 DOM 结构变化。(nextTick实现原理)
//   const observer = new MutationObserver(() => {
//     setThemeToken(getThemeToken()) // 当 CSS 变量变化时更新 token
//   })
//   observer.observe(document.documentElement, {
//     attributes: true,
//     attributeFilter: ['class'] // 当 html.class 变化（如切换 dark）时触发
//   })
//   return () => observer.disconnect()
// }, [])
